<!-- 审核记录 展示-->
<template>
    <el-table ref="tableRef" v-loading="loading" element-loading-text="数据加载中..." row-key="id"
        :current-row-key="selectedRowId" border :data="tableData" style="width: 100%;height: 50%;" highlight-current-row=true
      @row-click="handleRowClick"
     >
      <!-- <el-table-column prop="id" label="id" min-width="50"/> -->
      <el-table-column prop="code" label="知识编号" min-width="120"/>
      <el-table-column prop="reviewGroupId" label="审核组" min-width="120">
      <template #default="scope">
            <!-- 通过逗号连接数组中的成员用户名 -->
            <span>
              {{ getReviewGroupLabel(scope.row.reviewGroupId) }}
            </span>
          </template>
      </el-table-column>    
      <el-table-column prop="reviewerId" label="审核人" min-width="200">
      <template #default="scope">
            <!-- 通过逗号连接数组中的成员用户名 -->
            <span>
              {{ getUserLabel(scope.row.reviewerId) }}
            </span>
          </template>
      </el-table-column>  
      <el-table-column prop="reviewerList" label="参审成员" min-width="200">
      <template #default="scope">
            <!-- 通过逗号连接数组中的成员用户名 -->
            <span>
              {{ getUserLabel(scope.row.reviewerList) }}
            </span>
          </template>
      </el-table-column>  
      <el-table-column prop="reviewTime" label="发起审核时间" min-width="120"/>
      <el-table-column prop="reviewEndTime" label="审核完成时间" min-width="120"/>
      <el-table-column prop="reviewStatus" label="审核状态" min-width="120">
      <template #default="scope">
          <!-- 使用 statusData 来映射状态 -->
          <span>
            {{ getStatusLabel(scope.row.reviewStatus) }}
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="rejectReason" label="驳回原因" min-width="120"/>
      <el-table-column prop="approveReason" label="审核意见" min-width="120"/>
    </el-table>
</template>



<script setup>
import {ref,reactive,onMounted,onBeforeMount,watch,toRefs} from "vue"
import { getKnowledgeInfoHandler,getKnowledgeReviewGroupInfoHandler,getKnowledgeTypeInfoHandler,getKnowledgeReviewRecordsInfoHandler } from "../../../api/knowledge.js"
const props = defineProps({
  knowledgeData:Object,
  reviewData: Array,
  userinfo: Array,
});
const data = reactive({
  statusData: [
    {"value": 0,
    "label": "草稿"},
    {"value": 1,
    "label": "审核中"},
    {"value": 2,
    "label": "已发布"},
    {"value": 3,
    "label": "驳回"},
    {"value": 4,
    "label": "归档"},
  ],
  }
)
const {statusData} = toRefs(data)
const tableData = ref([])
// 根据code编号，获取对应知识库审核记录的方法
const getReviewRcordHandler = async () => {
  if (!props.knowledgeData || !props.knowledgeData.code) {
    console.log("props.knowledgeData 尚未准备好");
    return;
  }
  console.log("开始加载审核记录", props.knowledgeData.code);
  const rep = await getKnowledgeReviewRecordsInfoHandler(props.knowledgeData.code);
  console.log("审核记录返回:", rep.data.data.queryData);
  console.log("reviewData数据",props.reviewData)
  tableData.value=rep.data.data.queryData
};

// 监听 props 变化，当父组件传入新值时加载
 watch(
  () => [props.knowledgeData, props.reviewData,props.userinfo],
  ([newKnowledgeData, newReviewData,newuserinfo]) => {
    if (newKnowledgeData && newKnowledgeData.code) {
      getReviewRcordHandler();
    }
  },
  { immediate: true, deep: true }
 );


const getReviewGroupLabel = (reviewGroupId) => {
  // if (!props.reviewData || props.reviewData.length === 0) return "";
  const group = props.reviewData.find(item => item.id === reviewGroupId);
  return group ? group.name : "";
};

const getStatusLabel =(statusValue) => {
    // 根据状态值查找标签
    const status = statusData.value.find(item => item.value=== statusValue);
    return status ? status.label : '未知';  // 如果没有找到对应值，返回 '未知'
}

const getUserLabel = (submitterId) => {
  if (!submitterId) return '';
  console.log("==============20251013=====================",submitterId,"===========userinfo=======",props.userinfo)
  // 如果 submitterId 是数组
  if (Array.isArray(submitterId)) {
    const names = submitterId
      .map(id => {
        const user = props.userinfo.find(item => item.id === id);
        return user ? user.personname : '';
      })
      .filter(name => name !== ''); // 过滤掉没找到的
    return names.join(', '); // 用逗号连接
  }

  // 如果 submitterId 是单个数字
  const user = props.userinfo.find(item => item.id === submitterId);
  return user ? user.personname : '';
};

onMounted(async ()=>{
    console.log("组件已挂载，但 knowledgeData 可能尚未传入:", props.knowledgeData.code);
})
</script>